<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG in Html</title>
    <style>
        #svgInImg {
            width: 200px;
            /* svg 图像在只给出宽或高时，会始终保持原始的宽高比 */
        }
        #svgWrapper {
            width: 100%;
            height: 300px;
            background: url(../helloworld/helloworld.svg);
            background-size: 100px 100px;
            background-position: 50px 50px;
        }
        #svgUl {
            list-style-image: url(../helloworld/helloworld.svg);
            list-style-position: inside;
        }
        #svgUl > li {
            border: 10px solid black;
            border-image: url(../helloworld/helloworld.svg);
            border-image-outset: 10px;
            border-image-width: 40px;
        }
        #circleSvg {
            display: block;
            width: 500px;
            height: 500px;
            margin: auto;
            border: thick double navy;
            background-color: lightblue;
        }
        #curCircle {
            fill: lavender;
            stroke: navy;
            stroke-width: 5;
        }
    </style>
</head>
<body>
    <div>
        <p>通过img标签引入svg</p>
        <img id="svgInImg" src="../helloworld/helloworld.svg" title="Cat" alt="helloworldSVG">
    </div>
    <div>
        <p>通过background引入svg</p>
        <div id="svgWrapper"></div>
        <ul id="svgUl">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div>
        <p>通过&lt;object&gt;元素引入svg</p>
        <object data="../helloworld/helloworld.svg" type="image/svg+xml" alt="引入的svg" title="hello world">
            <p>引入失败或者浏览器不支持svg读取</p>
        </object>
    </div>
    <div>
        <p>通过&lt;foreignObject&gt;元素引入混合svg</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
            <g transform="skewX(20)">
            <switch>
                <!-- 选择一个子元素 -->
                <foreignObject x="1em" y="25%" width="10em" height="50%"
                    requiredFeatures="http://www.w3.org/TR/SVG11/featrue#Extensibility"
                >
                    <body xmlns="http://www.w3.org/1999/xhtml">
                        <p>
                            This is an XHTML pragraph embedded within a SVG!
                            So this text will wrap nicely around multiple lines,
                            but it will still be skewed form the SVG transform
                        </p>
                    </body>
                </foreignObject>
                <text x="1em" y="25%" dy="1em">
                    This SVG text won't wrap, so it will get cut off...
                </text>
            </switch>
            </g>
        </svg>
        <span>和svg出现在同一行</span>
    </div>
    <div>
        <h1>Inline SVG in HTML Demo Page</h1>
        <svg id="circleSvg" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
            <title>An SVG circle</title>
            <circle id="curCircle" cx="125" cy="125" r="100"></circle>
            <text x="125" y="125" dy=".5em" text-anchor="middle">
                Look Ma, Same Font!
            </text>
        </svg>
    </div>
</body>
</html>